<template>
  <div 
    :class="{menuItem:true, active:isActive}" 
    @click="itemClick"
    @mouseenter="handleHover(true)"
    @mouseleave="handleHover(false)"
  >
    <i :class="icon" class="menu-icon"/>
    <span class="menu-title">{{title}}</span>
    <img 
      src="@/assets/image/left-jt.png" 
      class="arrow"
      :style="arrowStyle"
    />
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Emit} from 'vue-property-decorator';

@Component
export default class MenuSubItem extends Vue {
  @Prop(Boolean) readonly isActive!: boolean;
  @Prop(String) readonly icon!: string;
  @Prop(String) readonly title!: string;
  
  private hoverProgress = 0;  // 悬停进度 0~1

  @Emit('click')
  itemClick() {return;}

  handleHover(isHovering: boolean) {
    const target = isHovering ? 1 : 0;
    const step = () => {
      this.hoverProgress += (target - this.hoverProgress) * 0.2;
      if (Math.abs(this.hoverProgress - target) > 0.01) {
        requestAnimationFrame(step);
      }
    };
    requestAnimationFrame(step);
  }

  get arrowStyle() {
    return {
      opacity: this.isActive ? 1 : this.hoverProgress,
      transform: `translateY(-50%) translateX(${8 * (1 - this.hoverProgress)}px)`
    };
  }
}
</script>

<style lang="scss" scoped>
.menuItem {
  $active-color: #2c6968;
  $hover-color: rgba($active-color, 0.6);
  
  width: 100%;
  padding: 12px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  &::after {
    border: 2px solid rgba(255, 215, 0, 0.8);
    animation: active-glow 1.5s infinite;
  }
  // 悬停光晕效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, 
      rgba($active-color, 0.2) 0%,
      transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover {
    background: $hover-color;
    
    &::before {
      opacity: 0.6;
    }

    .menu-icon {
      transform: scale(1.15) rotate(-5deg);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .menu-title {
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
  }

  &.active {
    background: $active-color;
    transform: scale(1.02); // 轻微放大
    z-index: 1; // 确保悬浮于其他元素之上
    .arrow {
      filter: brightness(1.2) drop-shadow(0 0 4px rgba($active-color, 0.8));
    }
    .menu-icon {
      transform: scale(1.2);
      filter: 
        drop-shadow(0 0 6px rgba(255,255,255,0.5)) 
        brightness(1.5);
    }

    .menu-title {
      font-weight: 600;
      text-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .arrow {
      right: -10px; // 向右移动
      filter: 
        hue-rotate(-20deg) 
        drop-shadow(0 0 8px rgba(44,105,104,0.8));
      animation: arrow-bounce 0.8s ease infinite;
    }
  }
}

.menu-icon {
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.menu-title {
  transition: all 0.3s ease;
}

.arrow {
  position: absolute;
  right: -6px;
  top: 50%;
  width: 20px;
  height: 26px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes active-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

// 箭头弹跳动画
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}

// 提升悬停状态对比度
</style>